<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
	<script src="lib/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel" src="./lib/my.jsx"></script>
<script type="text/babel">
	const root = ReactDOM.createRoot(document.querySelector("#app"));
	{
		// jsx xml
		// true,false,undefined,null 是不会进行渲染的。
		// root.render(true);
		// root.render(undefined);
		// root.render(null);
		
		// 支持字符串，数字，数组(被直接展开)
		// root.render("lala");
		// root.render(100);
		// root.render([1,2,3,4]);// 1234
		
		// 对象：不支持。但是
		// root.render({a:1});
		// root.render(React.createElement("div",null,"abc"));
	}
	
	{
		// 1- jsx基本语法。
		// root.render(<div>123</div>)
	}
	{
		// 2- jsx必须要闭合
		// root.render(<div>123)
	}
	{
		// 3- jsx有且只能是一个根元素
		// root.render(<div>1</div><div>2</div>)
	}
	{
		// 4- 解决问题1
		// root.render((
		// 	<React.Fragment>
		// 		<div>1</div>
		// 		<div>2</div>
		// 	</React.Fragment>
		// ))
		
		// const {Fragment} = React;
		// root.render((
		// 	<Fragment>
		// 		<div>1</div>
		// 		<div>2</div>
		// 	</Fragment>
		// ))
	}
	{
		// 5- 解决问题1
		// root.render((
		// 	<>
		// 		<div>1</div>
		// 		<div>2</div>
		// 	</>
		// ))
	}
	{
		// 6- 元素常量
		// const myDiv = (
		// 	<div>1</div>
		// )
		// root.render(myDiv)
	}
	{
		
		// root.render(myDiv)
	}
	{
		// 出现的标签必须能够被浏览器识别
		// root.render((
		// 	<div>
		// 		<aaaaaa></aaaaaa>
		// 	</div>
		// ))
	}
	{
		// 标签的首字母大写会被作为组件处理
		root.render((
			<div>
				<Aaaaaa></Aaaaaa>
			</div>
		))
	}
</script>
</html>